<template>
  <div
    class="energyLibrary"
    v-loading="$store.getters.loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#a19f9fb0;"
  >
    <lb-layout>
      <el-row>
        <el-col :span="24">
          <div class="eccount">
            <Title name="能源资源消费概况" :line="false" :noLineHeight="true">
              <stat-painting :data="stat"></stat-painting>
            </Title>
          </div>
        </el-col>
      </el-row>
      <el-row class="tab-area">
        <el-col :span="24">
          <el-tabs
            v-model="activeName"
            @tab-click="handleChangetab"
            class="text-tabs TTB-gutter"
          >
            <el-tab-pane
              v-for="(item, index) in tabArr"
              :key="index"
              :label="item.label"
              :name="item.value"
            ></el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <!-- <el-card class="box-card box-card-ex">
          <div class="box-content"> -->
          <el-row>
            <el-col :span="24">
              <Itable @dataTotab="dataTotab"></Itable>
            </el-col>
          </el-row>
          <!-- </div>
        </el-card> -->
        </el-col>
      </el-row>
    </lb-layout>
  </div>
</template>

<script>
import Title from "@/components/Title";
import Itable from "@/views/library/components/tableForm.vue";
export default {
  components: {
    Title,
    Itable,
  },
  data() {
    return {
      stat: [],
      // tab
      activeName: "0",
      tabArr: [
        {
          label: "能耗资源消费情况",
          value: "0",
        },
        {
          label: "数据新机房能源消费状况",
          value: "1",
        },
      ],
      tabData: null,
    };
  },
  watch: {
    tabData: {
      handler(value) {
        if (value) {
          this.statSet(value);
        }
      },
    },
  },
  created() {
    this.statReset();
  },
  methods: {
    statReset() {
      this.stat = [
        {
          name: "单位面积能耗最高",
          num: 0,
          unit: "kwh/m²",
          spancolor: "#FFFFFF",
          img: require("@/assets/images/index/index-st-1.png"),
          bgImg: require("@/assets/images/index/Group-1.png"),
        },
        {
          name: "单位面积能耗最低",
          num: 0,
          unit: "kwh/m²",
          spancolor: "#FFFFFF",
          img: require("@/assets/images/index/index-st-2.png"),
          bgImg: require("@/assets/images/index/Group-2.png"),
        },
        {
          name: "人均能耗最高",
          num: 0,
          unit: "kwh/p",
          spancolor: "#FFFFFF",
          img: require("@/assets/images/index/index-st-3.png"),
          bgImg: require("@/assets/images/index/Group-3.png"),
        },
        {
          name: "人均能耗最低",
          num: 0,
          unit: "kwh/p",
          spancolor: "#FFFFFF",
          img: require("@/assets/images/index/index-st-1.png"),
          bgImg: require("@/assets/images/index/Group-1.png"),
        },
      ];
    },
    // 4tab数据变化
    statSet(value) {
      if (value.perunitMax) {
        let num1 = (Number(value.perunitMax) / 100).toFixed(2);
        this.$set(this.stat[0], "num", num1);
        // console.log(num1);
      }
      if (value.perunitMin) {
        let num2 = (Number(value.perunitMin) / 100).toFixed(2);
        this.$set(this.stat[1], "num", num2);
        // console.log(num2);
      }
      if (value.percapitaMax) {
        let num3 = (Number(value.percapitaMax) / 100).toFixed(2);
        this.$set(this.stat[2], "num", num3);
        // console.log(num3);
      }
      if (value.percapitaMin) {
        let num4 = (Number(value.percapitaMin) / 100).toFixed(2);
        this.$set(this.stat[3], "num", num4);
        // console.log(num4);
      }
    },
    handleChangetab(tab, event) {},
    dataTotab(data) {
      this.tabData = data;
    },
  },
};
</script>

<style lang="scss" scoped>
.energyLibrary {
  width: 100%;
  ::v-deep .el-card__header {
    border-bottom: none;
  }
  .text-tabs {
    margin: 10px 0 10px -20px;
  }
  .box-card {
    .clearfix {
      height: 22px;
      width: 100%;
    }
    span {
      &:nth-child(1) {
        font-size: 20px;
        font-weight: 600;
        color: #333333;
      }
    }
  }
  .flex {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  // .box-card-ex{
  //   max-height: 600px;
  //   overflow: hidden;
  //   overflow-y: auto;
  // }
}
// ::v-deep .lb_layout {
//   background: #f2f2f5;
// }
</style>
